<template>
	<view class="">
		<view style="padding-left: 32rpx;padding-right: 32rpx;">
			<view class="top-item">
				<text class="top-item-title">工作组名称</text>
				<input type="text" v-model="name" placeholder="请输入" class="placeholder-view">
			</view>

			<view class="top-item">
				<text class="top-item-title">工作组成员</text>
				<input type="text" v-model="phone" @input="searchPeople" maxlength="11" placeholder="输入律师姓名/手机号"
					class="placeholder-view">

			</view>
			
			<scroll-view  scroll-y="true" class="laywer-sel-popup" v-if="searchList.length>0 && phone!=''" >
				<view v-for="(item,index) in searchList" :key="index" @click="clickPeople(item)" 
				style="height: 80rpx;display: flex;align-items: center;margin-left: 32rpx;">
					<image :src="item.account.avatarPic"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
					
			<!-- 		<image src="../../../../../static/phone/moren.png"
						v-if="item.account.avatarPic==null || item.account.avatarPic==undefined"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image> -->
					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					
				</view>
			</scroll-view>
			


			<view class="listview">
				<view :class="index%2==1 ? 'main_item2':'main_item'" v-for="(item,index) in nameList">
					<image :src="item.account.avatarPic"			
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
<!-- 
					<image src="../../../../../static/phone/moren.png"
						v-if="item.account.avatarPic==null || item.account.avatarPic==undefined"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image> -->
					<text class="listview-name" style="margin-left: 2rpx;width: 100rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					<image @click="deleteIt(item,index)" src="../../../../../static/phone/guanbi1.png"
						style="width: 32rpx;height: 32rpx;margin-left: auto;margin-right: 4rpx;"></image>
				</view>

			</view>


		</view>
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-sl" @click="add">
					确定
				</view>
			</view>
			<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
			<!-- 苹果x及以上的安全距离 -->
			<!-- </view> -->

		</view>
	</view>
</template>

<script>
import verify from '../../../../utils/verifyUtils'
	let app = ''
	export default {
		data() {
			return {
				tag:'',//add 新增  edit 编辑
				windowHeight: 0,
				needAdapt: false, //判断是不是苹果x以上机型
				nameList: [],
				name: '',
				phone: '',
				userIds: [],
				role: '',
				roleUrl:'',
				searchList:[],
				
				id:'',
				
			}
		},
		onLoad(options) {
			console.log('options',options)
			app = getApp()
			var _this = this
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.role = app.globalData.role
			_this.roleUrl =  _this.$roleUrl({tab:_this.role})
			_this.tag = options.tag
			if(_this.tag == 'edit'){
				let item = JSON.parse(options.item)
				_this.id = item.id
				_this.name = item.name
				
				let list = item.users
				
				for (var i = 0; i < list.length; i++) {

					let avatarPic = list[i]['account']['avatarPic']
					
					if(verify.isNotEmpty(avatarPic)){
						if(avatarPic.indexOf('http')<0){
							avatarPic = this.$imageUrls({picUrls: avatarPic})
						}
					}else{
						avatarPic = '../../../../../static/phone/moren.png'
					}
			
					list[i]['account']['avatarPic']= avatarPic
					
					_this.nameList.push(list[i])
				}
			}
	
		},
		onShow() {

		},
		mounted() {

		},
		methods: {

			/**
			 * 点击确定
			 */
			async add() {

				let _this = this
				if (_this.name == '') {
					uni.showToast({
						title: '请输入工作组名称',
						icon: "none"
					})
					return
				}
				if (_this.nameList.length == 0) {
					uni.showToast({
						title: '请输入工作组成员',
						icon: "none"
					})
					return
				}
				
				for (var i = 0; i < _this.nameList.length; i++) {
					 _this.userIds.push(_this.nameList[i]['id'])
				}
				uni.showLoading({
					
				})
				
				let data={
					name: _this.name,
					userIds: _this.userIds
				}
				
				let method = ''
				
				if(_this.tag == 'edit'){
					data.id = _this.id
					method = 'PUT'
				}else{
					method = 'POST'
				}
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/workGroup`,
					data: data,
					method: method, //默认是GET
				})
				uni.hideLoading()
				console.log('提交结果', res)
				if(res.data.code==200){
					uni.showToast({
						title:'提交成功！',
						icon:"success"
					})
					uni.navigateBack({
						delta:-1
					})
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:"none"
					})
				}
				// uni.navigateBack({
				// 	delta:-1
				// })

			},
			/**
			 * 输入框监听
			 */
			searchPeople(val) {
				console.log(val)
				let _this = this
				let code = val.detail.value
				//查询律师选择器
				_this.getNameList(code)
			},
			/**
			 * 
			 */
			async getNameList(code) {
				console.log(code)
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/lawyer/selector`,
					data: {
						keyword:code,
						// size: 1000,
						// page: 1
					},
					method: 'POST', //默认是GET
				})
				console.log('律师', res)
				_this.searchList = []
				if (res.data.code == 200) {
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						// let avatarPic = list[i]['account']['avatarPic']
						// if(avatarPic!=undefined && avatarPic.indexOf('http')<0){
						// 	avatarPic = _this.$imageUrls({picUrls: avatarPic})
						// 	list[i]['account']['avatarPic']= avatarPic
						// }
						
						let avatarPic = list[i]['account']['avatarPic']
						
						if(verify.isNotEmpty(avatarPic)){
							if(avatarPic.indexOf('http')<0){
								avatarPic = this.$imageUrls({picUrls: avatarPic})
							}
						}else{
							avatarPic = '../../../../../static/phone/moren.png'
						}
									
						list[i]['account']['avatarPic']= avatarPic
						
					}
					
					_this.searchList = list
				}

			},
			
			/**
			 * @param {Object} item
			 * 选择
			 */
			clickPeople(item){
				this.nameList.push(item)
				this.searchList = []
				this.phone = ''
			},
			/**
			 * 删记录
			 */
			deleteIt(item, index) {
				this.nameList.splice(index, 1)
				console.log(this.nameList)
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e1e1e1;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}

	.view-bottom-sl {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		margin-left: 32rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.top-item {
		height: 108rpx;
		border-bottom: 1rpx #eeeeee solid;
		display: flex;
		align-items: center;
	}

	.top-item-title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.placeholder-view {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: auto;
		text-align: right;
	}

	.listview {
		display: flex;
		flex-wrap: wrap;

	}


	.main_item {
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.main_item2 {
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		margin-left: 14rpx;
	}

	.listview-name {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	
	
	.laywer-sel-popup{
		height: 330rpx;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
		border-radius: 2px;
	}
</style>
